/**
 * 验证 useLayoutEffect 的逻辑
 */

import React, { useState, useEffect, useLayoutEffect } from 'react'
import { Button } from 'antd'

function Demo() {
  console.log('RENDER')
  let [num, setNum] = useState(0)
  useLayoutEffect(() => {
    if (num === 0) {
      setNum(10)
    }
  }, [num])

  return <div style={{
    backgroundColor: num === 0 ? 'red' : 'green'
  }}>
    <div id='num'>{num}</div>
    <Button onClick={() => {
      setNum(0)
    }}>新增</Button>
  </div>
}

export default Demo